<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>ECharts</title>
    <!-- 引入 echarts.js -->
    <script src="../js/echarts.min.js"></script>
    <script src="../js/china.js" type="text/javascript" charset="utf-8"></script>
</head>
<body background="../image/4.jpeg" style=" background-repeat:no-repeat ;background-size:100% 100%;
			background-attachment: fixed;opacity=0.4" >
    <!-- 为ECharts准备一个具备大小（宽高）的Dom -->
    <div id="main" style="width: 600px;height:400px;"></div>
    <script type="text/javascript">
        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('main'));
       //准备数据
       var area_data=[{'name':'北京',value:2678900},
       {name:'杭州',value:1288700},
       {name:'南京',value:1200900},
       {name:'济南',value:988800},
       {name:'上海',value:618600},
       ];
      var geoCoordMap ={//各个城市的经纬度坐标
      	'北京':[116.4551,40.2539],'杭州':[119.5313,29.8773],'济南':[117.1582,36.8701],'南京':[118.8062,31.9208],'上海':[121.4648,31.2891]
      };
      var convertData=function (data){//将geoCoordMap中的坐标数据和销售数据合并，返回值合并后的值 给convertData
      	var res =[];
      	for (var i=0;i<data.length;i++){
      		var geoCoord=geoCoordMap[data[i].name];
      		if(geoCoord){
      			res.push({name:data[i].name,
      			value:geoCoord.concat(data[i].value)});
      		}
      	}
      	return res;
      };
      var color=['#3ed4ff','#ffa022','#a6c84c'];
      


        // 指定图表的配置项和数据
        var option = {
        	backgroundColor:'',
        	title:{
        		text:'区域销售情况图',
        		left:'center',
        		top:'7%',
        		textStyle:{
        			color:'rgb(255,133,133)'
        		}
        	},tooltip:{
        		trigger:'item',
        		formatter:"{b0}:{c}",
        	},
        	legend:{
        		orient:"vertical",
        		top:'bottom',
        		left:"rigth",
        		data:[],
        		textStyle:{
        			color:"#fff"
        		},
        		selectedMode:'single'
        		
        	},
        	geo:{
        		map:"china",
        		zoom:1.2,
        		label:{
        			emphasis:{
        				show:false
        			}
        		},
        		roam:true,//动态缩放地图
        		itemStyle:{
        			normal:{
        				areaColor:"#142957",
        				borderColor:"#0692a4"
        			},emphasis:{
        				areaColor:"#0b1c2d"
        			}
        		}
        		
        	},
        	series:[{
        		name:'城市',
        		type:'effectScatter',//动态散点图
        		data:convertData(area_data),
        		coordinateSystem:'geo',
        		zlevel:2,
        		rippleEffect:{
        			brushType:'stroke'
        		},
        		label:{
        			normal:{
        				show:true,
        				position:'right',
        				formatter:"{b}"
        			}
        		},
        		symbolSize:function(val){
        			return val[2]/80000;
        		},
        		itemStyle:{
        			normal:{
        				color:color[1]
        			}
        		},
        	}]
        	
        };

        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
    </script>
</body>
</html>